:root {
  --border-radius: 4px;
}

body {
  /* primary blue */
  --blue-50: #e5f2fb;
  --blue-100: #bfdff7;
  --blue-200: #98ccf2;
  --blue-300: #74b8eb;
  --blue-400: #5aa8e8;
  --blue-500: #469ae4;
  --blue-600: #3f8cd7;
  --blue-700: #367bc4;
  --blue-800: #306ab2;
  --blue-900: #244d92;
  /* emerald green */
  --emerald-green-50: #ddf2ed;
  --emerald-green-100: #acdfd0;
  --emerald-green-200: #74cbb1;
  --emerald-green-300: #3dcfa8;
  --emerald-green-400: #00a67e;
  --emerald-green-500: #00956b;
  --emerald-green-600: #00885f;
  --emerald-green-700: #007850;
  --emerald-green-800: #006843;
  --emerald-green-900: #004c29;
  /* green */
  --green-default: #41c464;
  /* yellow */
  --yellow-default: #ffff00;
  /* purple */
  --purple-default: #660099;
  /* red */
  --red-50: #ffeaed;
  --red-100: #fecacf;
  --red-200: #ed9494;
  --red-300: #e26b6b;
  --red-400: #eb4747;
  --red-500: #ef322b;
  --red-600: #e0272b;
  --red-700: #ce1b25;
  --red-800: #c2101e;
  --red-900: #b20011;
  /* orange */
  --orange-50: #fff3e0;
  --orange-100: #ffe0b2;
  --orange-200: #ffcc80;
  --orange-300: #ffb84d;
  --orange-400: #ffa726;
  --orange-500: #ff9800;
  --orange-600: #ff8c00;
  --orange-700: #f97c01;
  --orange-800: #f36c01;
  --orange-900: #ea5001;
  /* grey */
  --grey-50: #f7f7f7;
  --grey-100: #eeeeee;
  --grey-200: #e3e3e3;
  --grey-300: #d1d1d1;
  --grey-400: #acacac;
  --grey-500: #8b8b8b;
  --grey-600: #646464;
  --grey-700: #515151;
  --grey-800: #333333;
  --grey-900: #131313;
  /* blue-grey */
  --blue-grey-50: #f8fcff;
  --blue-grey-100: #f3f7ff;
  --blue-grey-200: #eef2fc;
  --blue-grey-300: #e7ebf5;
  --blue-grey-400: #c6cad3;
  --blue-grey-500: #a8acb5;
  --blue-grey-600: #7e828a;
  --blue-grey-700: #696d75;
  --blue-grey-800: #4a4d55;
  --blue-grey-900: #282b32;
  /* navy */
  --navy-50: #e7edff;
  --navy-100: #c7d5ed;
  --navy-200: #aab8d4;
  --navy-300: #8b9cbc;
  --navy-400: #7587a9;
  --navy-500: #5e7297;
  --navy-600: #506486;
  --navy-700: #3f516f;
  --navy-800: #303f59;
  --navy-900: #1d2b41;
  /* black & white */
  --black-default: #000000;
  --white-default: #ffffff;
}

body.dark-mode {
  /* primary blue */
  --blue-50: #244d92;
  --blue-100: #306ab2;
  --blue-200: #367bc4;
  --blue-300: #3f8cd7;
  --blue-400: #469ae4;
  --blue-500: #5aa8e8;
  --blue-600: #74b8eb;
  --blue-700: #98ccf2;
  --blue-800: #bfdff7;
  --blue-900: #e5f2fb;
  /* emerald green */
  --emerald-green-50: #004c29;
  --emerald-green-100: #006843;
  --emerald-green-200: #007850;
  --emerald-green-300: #00885f;
  --emerald-green-400: #00956b;
  --emerald-green-500: #00a67e;
  --emerald-green-600: #3dcfa8;
  --emerald-green-700: #74cbb1;
  --emerald-green-800: #acdfd0;
  --emerald-green-900: #ddf2ed;
  /* green */
  --green-default: #41c464;
  /* yellow */
  --yellow-default: #ffff00;
  /* purple */
  --purple-default: #660099;
  /* red */
  --red-50: #b20011;
  --red-100: #c2101e;
  --red-200: #ce1b25;
  --red-300: #e0272b;
  --red-400: #ef322b;
  --red-500: #eb4747;
  --red-600: #e26b6b;
  --red-700: #ed9494;
  --red-800: #fecacf;
  --red-900: #ffeaed;
  /* orange */
  --orange-50: #ea5001;
  --orange-100: #f36c01;
  --orange-200: #f97c01;
  --orange-300: #ff8c00;
  --orange-400: #ff9800;
  --orange-500: #ffa726;
  --orange-600: #ffb84d;
  --orange-700: #ffcc80;
  --orange-800: #ffe0b2;
  --orange-900: #fff3e0;
  /* grey */
  --grey-50: #131313;
  --grey-100: #1f1f1f;
  --grey-200: #2c2c2c;
  --grey-300: #393939;
  --grey-400: #8b8b8b;
  --grey-500: #acacac;
  --grey-600: #d1d1d1;
  --grey-700: #e3e3e3;
  --grey-800: #eeeeee;
  --grey-900: #f7f7f7;
  /* blue-grey */
  --blue-grey-50: #282b32;
  --blue-grey-100: #4a4d55;
  --blue-grey-200: #696d75;
  --blue-grey-300: #7e828a;
  --blue-grey-400: #a8acb5;
  --blue-grey-500: #c6cad3;
  --blue-grey-600: #e7ebf5;
  --blue-grey-700: #eef2fc;
  --blue-grey-800: #f3f7ff;
  --blue-grey-900: #f8fcff;
  /* navy */
  --navy-50: #1d2b41;
  --navy-100: #303f59;
  --navy-200: #3f516f;
  --navy-300: #506486;
  --navy-400: #5e7297;
  --navy-500: #7587a9;
  --navy-600: #8b9cbc;
  --navy-700: #aab8d4;
  --navy-800: #c7d5ed;
  --navy-900: #e7edff;
  /* black & white */
  --black-default: #ffffff;
  --white-default: #000000;
}

body {
  --primary: var(--blue-500);
  --secondary: var(--emerald-green-300);
  --secondary-lighter: var(--emerald-green-100);

  --status-success: var(--green-default);
  --status-good: var(--blue-500);
  --status-warn: var(--orange-600);
  --status-fail: var(--red-400);
  --status-danger: var(--red-900);
  --status-danger-lighter: var(--red-500);

  --background-default: var(--white-default);
  --background-primary: var(--grey-50);
  --background-primary-darker: var(--grey-100);
  --background-primary-darkest: var(--grey-200);
  --background-danger: var(--red-50);
  --background-row-danger: var(--red-50);
  --background-hover-primary: var(--blue-50);
  --background-hover-primary-darker: var(--blue-100);
  --background-focus-primary: var(--blue-50);
  --background-hover-secondary: var(--emerald-green-50);
  --background-hover-default: var(--grey-100);
  --background-knockout: var(--black-default);
  --background-disable: var(--grey-300);
  --background-disable-lighter: var(--grey-200);
  --background-layer: var(--white-default);
  --background-blind: rgba(226, 226, 226, 0.7);
  --background-blind-gradient: linear-gradient(
    135deg,
    rgba(226, 226, 226, 0.7) 0%,
    rgba(219, 219, 219, 0.7) 43%,
    rgba(209, 209, 209, 0.7) 51%,
    rgba(254, 254, 254, 0.7) 100%
  );

  --border-knockout: var(--white-default);
  --border-default: var(--black-default);
  --border-primary: var(--grey-200);
  --border-primary-lighter: var(--grey-100);
  --border-primary-darker: var(--grey-300);
  --border-primary-darkest: var(--grey-500);

  --box-shadow-default: 1px 1px 10px rgba(0, 0, 0, 0.15);

  --chart-success: var(--emerald-green-300);
  --chart-fail: var(--red-400);
  --chart-1s: var(--emerald-green-300);
  --chart-3s: var(--blue-300);
  --chart-5s: var(--orange-500);
  --chart-slow: var(--orange-800);
  --chart-text: var(--text-primary);
  --chart-text-lighter: var(--text-primary-lightest);
  --chart-line: var(--text-primary);
  --chart-guide-line: rgba(0, 0, 0, 0.1);

  --icon-hover: var(--blue-grey-600);
  --icon-default: var(--blue-grey-500);
  --icon-default-darker: var(--blue-grey-600);
  --icon-default-lighter: var(--blue-grey-400);
  --icon-default-lightest: var(--blue-grey-300);
  --icon-disable: var(--blue-grey-300);

  --table-header-background: var(--blue-grey-50);
  --table-header-moving-background: var(--blue-grey-400);

  --text-default: var(--black-default);
  --text-primary: var(--grey-800);
  --text-primary-lighter: var(--grey-700);
  --text-primary-lightest: var(--grey-600);
  --text-secondary: var(--grey-500);
  --text-secondary-lighter: var(--grey-400);
  --text-secondary-lightest: var(--grey-300);
  --text-knockout: var(--white-default);
  --text-shadow: var(--grey-100);
  --text-disable: var(--grey-300);

  --form-require: var(--red-900);
  --form-link: var(--blue-700);
  --form-link-visited: var(--purple-default);
  --form-input-border: var(--grey-400);

  --header-background: var(--blue-500);
  --header-background-lighter: var(--blue-300);
  --header-border: var(--blue-700);

  --period-select-background: var(--navy-800);
  --period-select-box-shadow: var(--navy-900);
  --period-select-box-border: var(--navy-900);
  --period-select-box-border-lighter: var(--navy-700);

  --transaction-short-info-background: var(--navy-700);
  --simple-progress-slider-bar-background: var(--blue-100);

  --server-map-node-background: var(--white-default);
  --server-map-node-border-default: var(--blue-grey-400);
  --server-map-node-border-outline: var(--grey-50);

  --snb-background: linear-gradient(170deg, var(--blue-400), var(--blue-900));
  --snb-border: var(--header-border);
  --snb-text: var(--text-knockout);
  --snb-logo-hover: var(--blue-700);
  --snb-scale-button-hover: var(--blue-900);
  --snb-link-item-hover: var(--blue-800);
  --snb-child-link-background: var(--blue-700);
  --snb-child-link-item-hover: var(--blue-900);
  --snb-child-link-title: var(--blue-900);
  --snb-theme-hover: var(--snb-child-link-background);
  --snb-submenu-background: var(--blue-900);
}

body.dark-mode {
  color-scheme: dark;

  --primary: var(--blue-500);
  --secondary: var(--emerald-green-600);
  --secondary-lighter: var(--emerald-green-100);

  --status-success: var(--green-default);
  --status-good: var(--blue-500);
  --status-warn: var(--orange-600);
  --status-fail: var(--red-400);
  --status-danger: var(--red-50);
  --status-danger-lighter: var(--red-500);

  --background-default: var(--grey-100);
  --background-primary: var(--grey-50);
  --background-primary-darker: var(--grey-200);
  --background-primary-darkest: var(--grey-300);
  --background-danger: var(--red-50);
  --background-row-danger: var(--red-50);
  --background-hover-primary: var(--blue-50);
  --background-hover-primary-darker: var(--blue-100);
  --background-focus-primary: var(--blue-50);
  --background-hover-secondary: var(--emerald-green-50);
  --background-hover-default: var(--grey-200);
  --background-knockout: var(--black-default);
  --background-disable: var(--grey-300);
  --background-disable-lighter: var(--grey-200);
  --background-layer: var(--grey-200);
  --background-blind: rgba(46, 44, 44, 0.8);
  --background-blind-gradient: linear-gradient(
    135deg,
    rgba(29, 29, 29, 0.7) 0%,
    rgba(36, 36, 36, 0.7) 43%,
    rgba(46, 46, 46, 0.7) 51%,
    rgba(1, 1, 1, 0.7) 100%
  );

  --border-knockout: var(--white-default);
  --border-default: var(--black-default);
  --border-primary: var(--grey-300);
  --border-primary-lighter: var(--grey-200);
  --border-primary-darker: var(--grey-400);
  --border-primary-darkest: var(--grey-500);

  --box-shadow-default: 1px 1px 10px rgba(0, 0, 0, 0.85);

  --chart-success: var(--emerald-green-600);
  --chart-fail: var(--red-500);
  --chart-1s: var(--emerald-green-600);
  --chart-3s: var(--blue-600);
  --chart-5s: var(--orange-400);
  --chart-slow: var(--orange-100);
  --chart-text: var(--text-primary-lighter);
  --chart-text-lighter: var(--text-primary-lightest);
  --chart-line: var(--text-primary-lighter);
  --chart-guide-line: rgba(255, 255, 255, 0.2);

  --icon-hover: var(--blue-grey-600);
  --icon-default: var(--blue-grey-500);
  --icon-default-darker: var(--blue-grey-600);
  --icon-default-lighter: var(--blue-grey-400);
  --icon-default-lightest: var(--blue-grey-300);
  --icon-disable: var(--blue-grey-300);

  --table-header-background: var(--blue-grey-50);
  --table-header-moving-background: var(--blue-grey-400);

  --text-default: var(--black-default);
  --text-primary: var(--grey-800);
  --text-primary-lighter: var(--grey-700);
  --text-primary-lightest: var(--grey-600);
  --text-secondary: var(--grey-500);
  --text-secondary-lighter: var(--grey-400);
  --text-secondary-lightest: var(--grey-300);
  --text-knockout: var(--black-default);
  --text-shadow: var(--grey-100);
  --text-disable: var(--blue-grey-100);

  --form-require: var(--red-300);
  --form-link: var(--blue-700);
  --form-link-visited: var(--purple-default);
  --form-input-border: var(--grey-400);

  --header-background: var(--navy-50);
  --header-background-lighter: var(--blue-300);
  --header-border: var(--navy-100);

  --period-select-background: var(--navy-100);
  --period-select-box-shadow: var(--navy-200);
  --period-select-box-border: var(--navy-200);
  --period-select-box-border-lighter: var(--navy-50);

  --transaction-short-info-background: var(--navy-100);
  --simple-progress-slider-bar-background: var(--blue-100);

  --server-map-node-background: var(--grey-300);
  --server-map-node-border-default: var(--blue-grey-400);
  --server-map-node-border-outline: var(--grey-50);

  --snb-background: linear-gradient(
    170deg,
    var(--background-primary-darker),
    var(--background-primary)
  );
  --snb-border: var(--border-primary-lighter);
  --snb-text: var(--text-primary);
  --snb-logo-hover: var(--blue-grey-50);
  --snb-scale-button-hover: var(--blue-grey-100);
  --snb-link-item-hover: var(--grey-300);
  --snb-child-link-background: var(--background-layer);
  --snb-child-link-item-hover: var(--grey-400);
  --snb-child-link-title: var(--blue-grey-100);
  --snb-theme-hover: var(--snb-child-link-background);
}
